import { useEffect, useState } from 'react'
import { Button } from 'antd'
import { observer } from 'mobx-react'
import counter from '../stores/counter.js'

const NumberC = props => {
  let list = [<span>1</span>, <span>2</span>, <span>3</span>, <span>4</span>, <span>5</span>]
  let list1 = [1, 2, 3, 4, 5, 6, 7, 8]

  // const { cart, counter } = useStore()

  const [order, setOrder] = useState('positive')

  const listShow = type => {
    return type == 'positive' ? list : list.reverse()
  }

  const orderChange = () => {
    console.log(111)
    order == 'positive' ? setOrder('reverse') : setOrder('positive')
  }

  return (
    <>
      <Button type="primary" onClick={orderChange}>
        变序
      </Button>
      {listShow(order)}
      {list1.map(item => (
        <span>{item}</span>
      ))}

      <br />
      <button onClick={counter.increment}>加1</button>
      <button onClick={counter.decrement}>减1</button>
      <button onClick={counter.reset}>重置</button>
      <span>数值：{counter.count}</span>

      {/* <div>{counter.count}</div> */}
    </>
  )
}

export default observer(NumberC)
